<template>
 <a-modal
    title="编辑表单"
    width="60%"
    :visible="editVisible"
    @ok="handleSubmit"
    @cancel="()=>{this.editVisible=false}"
  >
       <a-form  :form="form">
          <a-row :gutter="24">
          <a-col v-for="fieldOptions in editFormColums" :span="12" :key="fieldOptions">
               <a-form-item
                :key="fieldOptions"
                :label="fieldOptions.labelText" 
                >
           <a-input
                v-if="fieldOptions.fieldName && fieldOptions.type === 'text'"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
                :placeholder="fieldOptions.placeholder"
            />
            <a-select
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'select'"
                style="width: 100%"
                showSearch
                :options="fieldOptions.options"
                :filterOption="selectFilterOption"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                allowClear
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : undefined,
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
                :placeholder="fieldOptions.placeholder"
            />
            <a-input-number
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'number'"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                :min="fieldOptions.min ? fieldOptions.min : 1"
                style="width: 100%"
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
                :placeholder="fieldOptions.placeholder"
            />
            <a-radio-group
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'radio' && Array.isArray(fieldOptions.options)"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                buttonStyle="solid"
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
            >
                <template v-for="(item, index) in fieldOptions.options">
                <a-radio-button :key="index" :value="item.value">{{ item.label }} </a-radio-button>
                </template>
            </a-radio-group>

            <a-date-picker
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'datetime'"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                :placeholder="fieldOptions.placeholder"
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
            />
            <a-range-picker
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'datetimeRange'"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
                :placeholder="fieldOptions.placeholder"
            />
            <a-cascader
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'cascader'"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
                :options="fieldOptions.options"
                :showSearch="{ cascaderFilter }"
                v-decorator="[
                fieldOptions.fieldName,
                { initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : [] }
                ]"
                :placeholder="fieldOptions.placeholder"
            />
            <a-time-picker
                v-else-if="fieldOptions.fieldName && fieldOptions.type === 'timepicker'"
                v-decorator="[
                fieldOptions.fieldName,
                {
                    initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
                    rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
                }
                ]"
                :size="fieldOptions.size ? fieldOptions.size : 'default'"
            />

            </a-form-item>
          </a-col>
          <!-- <a-col :span="8">
                <a-button type="primary" @click="handleSubmit">提交</a-button>

                <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
         </a-col> -->
      </a-row>
    </a-form>
   </a-modal>
</template>
<script>
export default {
    props:{
        editVisible:{
            type:Boolean
        },
        editFormColums:{
            type: Array
        },
        editData:{
            type: Object
        },

    },
    data(){
        return{
            form:this.$form.createForm(this),
        }
    },
    mounted() {
        var keys = Object.keys(this.editData);
        keys.map(key=>{
            this.$nextTick(() => {
                  this.form.setFieldsValue({
                    [key]:this.editData[key]
                    })
            })
          
        })
        
        

    },
    methods: {
        handleSubmit(){
            console.log('handleSubmit(')
              this.form.validateFields((err, values) => {
               this.$emit('submit',values)
            });
        },
        resetForm(){
            this.form.resetFields()
        }
    },
}
</script>